<template>
  <div class="comments">
    <div class="score">
      <div class="left">
        <div id="score">{{seller.score}}</div>
        <div>综合评分</div>
        <div>高于周边商家{{seller.rankRate}}%</div>
      </div>
      <div class="right">
        <div>
          <span>服务态度</span>
          <el-rate
            v-model="seller.serviceScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
        </div>
        <div>
          <span> 物流态度 </span>
          <el-rate
            v-model="seller.foodScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
        </div>
        <div>平均送达时间 {{seller.deliveryTime}}分钟</div>
      </div>
    </div>
    <CommentsLists :ratings=$store.state.getDataAbout.data.ratings></CommentsLists>
  </div>
</template>

<script>
import CommentsLists from "./CommentsLists.vue";
export default {
  name: "Comments",
  components: { CommentsLists },
  data() {
    return {
      value1: 3.7,
      value2: 4.2,
      d: [],
    };
  },
  computed:{
    seller(){
      return this.$store.state.getDataAbout.data.seller
    }
  },
  activated() {
    console.log(this.seller)
  },
};
</script>

<style scoped>
.comments {
  font-size: 12px;
  background: #eee;
}
.score {
  background: #fff;
  padding: 10px;
  height: 90px;
  border-bottom: 1px solid #eee;
  display: flex;
  margin-bottom: 20px;
}
.score .left {
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eee;
}
.score .left #score {
  font-size: 18px;
  color: rgb(223, 189, 0);
}
.score .right {
  padding-left: 20px;
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.score .right span {
  margin-right: 10px;
}
.score .right div {
  display: flex;
}
</style>